<template>
  <vxe-modal v-model="addUpdateFormVisible"
             :title="title"
             resize
             esc-closable>
    <template v-slot>
      <vxe-form ref="addUpdateFormRef"
                title-align="right"
                title-width="80"
                :data="addUpdateForm"
                :rules="rules"
                :loading="loading"
                @submit="submitEvent">
        <vxe-form-item title="名称"
                       field="name"
                       span="24">
          <vxe-input v-model="addUpdateForm.name"
                     placeholder="请输入名称"
                     clearable></vxe-input>
        </vxe-form-item>
        <vxe-form-item title="编码"
                       field="code"
                       span="24">
          <vxe-input v-model="addUpdateForm.code"
                     placeholder="请输入编码"
                     clearable></vxe-input>
        </vxe-form-item>
        <vxe-form-item title="备注"
                       span="24">
          <vxe-textarea v-model="addUpdateForm.remarks"
                        clearable></vxe-textarea>
        </vxe-form-item>
        <vxe-form-item align="right"
                       span="24">
          <template v-slot>
            <vxe-button v-if="btnExist"
                        type="submit"
                        status="primary">
              确定
            </vxe-button>
            <vxe-button v-if="btnExist"
                        @click="addUpdateFormVisible = false">
              取消
            </vxe-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
  </vxe-modal>
</template>

<script>

export default {
  name: 'TreeSideForm',
  props: {
    initTreeData: {
      type: Function,
      default: null
    },
    addUrl: String,
    updateUrl: String
  },
  data () {
    return {
      loading: false,
      btnExist: true,
      addUpdateFormVisible: false, // 是否显示弹框
      title: '', // 弹框标题
      addUpdateForm: {},
      initFrom: {},
      rules: {
        name: [
          { required: true, message: '请输入名称' }
        ],
        code: [
          { required: true, message: '请输入编码' }
        ]
      }
    }
  },
  methods: {
    initVxeModel (row) {
      this.addUpdateFormVisible = true
      this.resetVxeModel()
      if (row) {
        this.title = '修改目录'
        this.addUpdateForm = JSON.parse(JSON.stringify(row))
      } else {
        this.title = '新增目录'
      }
    },
    submitEvent () {
      this.loading = true
      this.btnExist = false
      const config = {
        url: this.addUpdateForm.id ? this.updateUrl : this.addUrl,
        method: 'post',
        data: this.addUpdateForm
      }
      this.$axios(config).then(res => {
        this.$emit('nodeClick')
        this.loading = false
        this.addUpdateFormVisible = false
        this.btnExist = true
        this.initTreeData()
        this.$message.success(res.msg)
      })
        .catch(() => {
          this.loading = false
          this.btnExist = true
        })
    },
    // 重置
    resetVxeModel () {
      this.addUpdateForm = {}
      this.$nextTick(() => {
        this.$refs.addUpdateFormRef.clearValidate()
      })
    }
  }
}
</script>
